<template>
	<view>
		<view style="margin-bottom: 20rpx;">
			<u-tabs :list="tabs" :is-scroll="false" :current="current" @change="change" active-color="#F3060D"></u-tabs>
		</view>
		<view style="padding: 25rpx;">
			<view class="list" v-if="current == 0">
				<view class="item" v-for="(item, index) in list" :key="index" @click="toPath">
					<view class="lebel">
						{{ item.label }}
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
			</view>
			<view class="list" v-else>
				<view class="item" v-for="(item, index) in list2" :key="index" @click="toPath">
					<view class="lebel">
						{{ item.label }}
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="dc_top">
			<view class="dc_btn" @click="addToPath">添加身份</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs:[{
					name: '身份管理'
				}, {
					name: '管理员管理'
				}],
				current: 0,
				list: [{
						label: '店长'
					},
					{
						label: '配送员'
					},
					{
						label: '营业员'
					},
					{
						label: '副店长'
					}
				],
				list2: [
					{
						label: '张三'
					},
					{
						label: '李四'
					}
				]
			};
		},
		methods: {
			toPath() {
				if(this.current == 0){
					uni.navigateTo({
						url: '/pages/Permissions/identity'
					})
				} else if(this.current == 1){
					uni.navigateTo({
						url: '/pages/Permissions/administrator'
					})
				}
			},
			addToPath() {
				if(this.current == 0){
					uni.navigateTo({
						url: '/pages/Permissions/identity?type=add'
					})
				} else if(this.current == 1){
					uni.navigateTo({
						url: '/pages/Permissions/administrator?type=add'
					})
				}
			},
			change(index){
				this.current = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dc_top {
		position: fixed;
		bottom: 80rpx;
		width: 100%;
		padding: 0rpx 37rpx;
		left: 0;
		.dc_btn {
			height: 88rpx;
			border-radius: 44rpx;
			background: linear-gradient(147.27deg, #F1714E 0%, #E93E30 100%);
			font-size: 32rpx;
			font-weight: 500;
			line-height: 44rpx;
			color: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.list {
		background-color: #FFF;
		border-radius: 10rpx;
		padding: 0 30rpx;

		.item {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #F4F5F7;

			.label {
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
			}
		}

		.item:last-child {
			border-bottom: 0;
		}
	}
</style>
<style>
	page {
		background-color: #F4F5F7;
		box-sizing: border-box;
	}
</style>